<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/jquery/jquery.min.js"></script>
	<script src="js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
	<script src="js/jquery.validation/1.14.0/messages_zh.min.js"></script>
	<script src="/ftl/js/vue/vue.min.js"></script>
	<style>
		input.error {
			border: 1px solid #E6594E;
		}
	</style>
</head>
<body>
	 <div class="container">
		<form id="addUserForm">
		  <br/>
		  <div class="form-group">
			<label for="username">用户名称：</label>
			<input type="text" class="form-control" id="username" name="username" placeholder="输入名称">
		  </div>
		  <div class="form-group">
			<label for="userage">用户年龄：</label>
			<input type="text" class="form-control" id="userage" name="userage" placeholder="输入年龄">
		  </div>
			<div class="form-group">
				<label for="dept">用户部门：</label>
				<select id="dept" name="dept">
					<option>请选择</option>
					<option v-for="(item,index) in result" :value="item.id">{{item.deptname}}</option>
				</select>
			</div>
		  <div class="form-group">
		  <button type="button" id="saveBtn" class="btn btn-success">提交</button>
		  <button type="button" id="cancelBtn" class="btn btn-default">取消</button>
		  </div>
		</form>
    </div>
    
    <script>
		var app=new Vue({
			el:".container",
			data:{
				result:[]
			}
		})
		$(function (){
			$.ajax({
				type: "post",
				url: "/getDept.do",
				success:function (data){
					app.result=data
				}
			})
		})
		var addUser=function (){
			if (!check().form()){
				return
			}
			$.ajax({
				type:"post",
				url:"/addUser.do",
				data:{
					"name":$("#username").val(),
					"age":$("#userage").val(),
					"deptid":$("#dept").val()
				},
				success:function (data){
					$("#cancelBtn").click()
				}
			})
		}

		$("#saveBtn").click(function (){
			addUser()
		})

		$("#cancelBtn").click(function(){
			var index=parent.layer.getFrameIndex(window.name)
			parent.getUserPageList()
			parent.layer.close(index)
		})
		function check(){
			return $("#addUserForm").validate({
				rules:{
					username:{
						required:true
					},
					userage:{
						required:true
					}
				},
				message:{
					username:{
						required:''
					},
					userage:{
						required:''
					}
				}
			})
		}
    </script>
</body>
</html>